<template>
    <div class="page-height" ref="height1">
        <!-- 搜索部分-->
        <div class="search-view">
            <el-form :inline="true" class="demo-form-inline" label-width="100px" size="small">
                <el-form-item label="日终结余">
                    <interval @money="qujianchange" ref="qujian" sttype="trademarknum_01"></interval>
                </el-form-item>
                <el-form-item label="现金支出">
                    <interval @money="qujianchange" ref="qujian1"  sttype="trademarknum_02"></interval>
                </el-form-item>
                <el-form-item label="总支出">
                    <interval @money="qujianchange" ref="qujian2"  sttype="trademarknum_03"></interval>
                </el-form-item>
                <el-form-item label="冻结">
                    <interval @money="qujianchange" ref="qujian3"  sttype="trademarknum_04"></interval>
                </el-form-item>
                <el-form-item label="总存入">
                    <interval @money="qujianchange" ref="qujian4"  sttype="trademarknum_05"></interval>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                    v-model="query.time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                
                <el-form-item label="" style="width:300px !important">
                    <el-button type="primary" @click="onSearch()">搜索</el-button>
                    <el-button @click="resetQuery()">重置</el-button>
                    <el-button @click="onRefresh()" icon="el-icon-refresh" circle></el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div style="margin:0 20px"> 
        <el-table :max-height="maxheight" :key="key" :data="tableData" border size="mini" v-loading="loading" element-loading-text="加载中..." stripe
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column
            align="center"
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center"></el-table-column>
                 
            <el-table-column prop="advertiser_id" label="广告主ID" align="center"></el-table-column>
            <el-table-column prop="balance" label="日终结余(元)" align="center"></el-table-column>
            <el-table-column prop="cash_cost" label="现金支出(元)" align="center"></el-table-column>
            <el-table-column prop="cost" label="总支出(元)" align="center"></el-table-column>
            <el-table-column prop="frozen" label="冻结(元)" align="center"></el-table-column>
            <el-table-column prop="income" label="总存入(元)" align="center"></el-table-column>
            <el-table-column
                align="center"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="$refs.detailref.open(scope.row)" type="text" size="small">详情</el-button>
                </template>
                </el-table-column>
        </el-table>
    </div>
        <div class="pagination-view">
            <el-pagination background layout="sizes, prev, pager, next" :current-page="page" :total="total"
                :page-sizes="[10, 20, 50, 100]" :page-size="page_size" @current-change="getData"
                @size-change="handleSizeChange"  />
        </div>
        <detail_page ref="detailref"></detail_page>
    </div>
</template>

<script>
import detail_page from './common/detail.vue'
export default {
    name: 'flowing',
    components: { detail_page },
    data() {
        return {
            key:0,
            maxheight:0,
            loading:false,
            query: {
                trademarknum_01: '',
                trademarknum_02: '',
                trademarknum_03: '',
                trademarknum_04: '',
                trademarknum_05: '',
              
                time:''
            },
            tableData: [],
            total: 0,
            page: 1,
            page_size: 10,
        }
    },
    created() {
       
        this.getData(1)
    },
    watch: {
        getCurrent: function () {
            this.getData(1)
        }
    },
    mounted(){
        let height1 = this.$refs.height1.clientHeight;
        this.maxheight = height1 - 75
        this.key++
    },
    methods: {

        qujianchange(e){
            this.query[e.sttype] = e.money
        },


        handleSelectionChange(){

        },
        // 搜索
        onSearch(e) {
            this.getData(1)
        },
        //重置搜索
        resetQuery() {
           this.query={
            trademarknum_01: '',
                trademarknum_02: '',
                trademarknum_03: '',
                trademarknum_04: '',
                trademarknum_05: '',
                time:''
            },
            this.$refs.qujian.rechar()
            this.$refs.qujian1.rechar()
            this.$refs.qujian2.rechar()
            this.$refs.qujian3.rechar()
            this.$refs.qujian4.rechar()
            this.getData(1)
        },

        // 刷新
        onRefresh() {
            this.getData()
        },
        //page_size发生变化
        handleSizeChange(e) {
            this.page_size = e
            this.getData(1)
        },
        getData(page = null) {

            if (page) this.page = page
            var query = this.query
            query['page'] = this.page
            query['pageSize'] = this.page_size
            this.loading = true
            this.$api.post('/api/demo/daily', query).then((res) => {
                const list = res.data.list || []
                this.tableData = list
                this.total = res.data.total
                this.loading = false
            }).catch((err) => {
                this.apiErr(err)
            }).finally(() => {
                this.loading = false
                this.loadingHide()
            })
        },
    }
}
</script>

<style lang="scss" scoped>


.search-view {
    padding: 20px 20px 0;
    margin-bottom:20px;
    .el-form-item {
        width: 260px;
        margin-bottom: 10px;

        .input {
            width: 150px;
        }
    }
}

.btn-group {
    margin-bottom: 10px;

    .el-button {
        margin-left: 0;
        margin-right: 10px;
        margin-top: 10px;
    }
}

.color_bule {
    color: #4490e7;
    cursor: pointer;
}

.item-text {
    padding: 0 8px;
}
</style>
